<!-- Dom模板 -->
<template>
  <div class="ping_box">
    <div class="pingBox_main">
      <div class="ping-top">
        <h2>全部评论</h2>
        <p>
          本书获15.7万粉丝，{{ $store.state.bags.commentData.length }}条留言
        </p>
      </div>
      <div class="ping_main">
        <div
          class="pl_main-alive"
          v-for="(item, index) in $store.state.bags.commentData"
          :key="index"
        >
          <div class="aplive-top">
            <div class="aplive_left">
              <img :src="tokens?(item.user_img !== 'null'?item.user_img:'../../../static/img/touxiang.jpg'):''" alt="" />
              <div class="top_name_time">
                <p>{{ item.name }}</p>
                <p>{{ item.time }}</p>
              </div>
            </div>
            <div class="aplive-rightBox">
              <div
                ref="likeList"
                class="aplive-right"
                @click="like(item, index)"
              >
                <p class="iconfont icon-zan1"></p>
                <p ref="goodLength">{{ item.good }}</p>
              </div>
              <div>
                <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
                <div
                  @click="showPopup(item)"
                  class="delBtn iconfont icon-shenglvehao"
                ></div>
                <van-popup
                  position="bottom"
                  :style="{ height: '10%' }"
                  v-model="show"
                >
                  <div class="delBox" @click="del()">删除</div>
                </van-popup>
              </div>
            </div>
          </div>
          <div class="aplive-main">
            <p>
              {{ item.evaluationtext }}
            </p>
          </div>
        </div>
        <div v-if="$store.state.bags.commentData.length <= 0" class="kong">
          <p class="iconfont icon-shoutidai">?</p>
          <p>本书还没有评论的内容哦</p>
        </div>
      </div>
      <div class="inputBottom">
        <div>
          <img :src="$store.state.bags.bookItem.book_img_url" />
        </div>
        <van-circle
          v-model="currentRate"
          color="#ff9191"
          layer-color="#eee"
          size="40px"
          :rate="30"
          :speed="100"
          text=""
        />
        <input
          class="inputPingLun"
          type="text"
          placeholder="不愧是你，提笔就是一个热评~"
          maxlength="0"
          @click="inputClick()"
        />
      </div>
    </div>
    <div class="greyBox" @click="greyClick()" v-if="flag"></div>
    <transition name="bottom">
      <collect class="alertBox" v-if="flag" />
    </transition>
    <!-- <Alert v-if="alertFlag" :transition="transition" class="alert">
       <collect class="alertBox" v-if="flag" />
    </Alert> -->
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import * as API from "../../api/userFun.js";
import { alert_parent } from "../alert/alert_mixin";
import Alert from "../alert/alert.vue";
import collect from "./collect.vue";
export default {
  mixins: [alert_parent],

  components: {
    Alert,
    collect,
  },
  name: "",
  data() {
    return {
      msg: "测试",
      flag: false,
      currentRate: 0,
      show: false,
      bookItem: {},
      tokens: sessionStorage.getItem("token")||'',
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    //   console.log(this.$store.state.bags.bookItem)
    let dataItem = this.$store.state.bags.bookItem;
    API.getAuthor({ userid: dataItem.userid, bookid: dataItem.bookid }).then(
      (res) => {
        // res.evaluation.people.forEach((item,index)=>{
        // })
      }
    );
    this.forList();
      
     
  },
  // Vue方法定义
  methods: {
    // zan(){
    //     console.log('暂停')
    // },
    // bofang(){
       
    //    this.timmer = setInterval(() => {
    //         this.$refs['music'].currentTime = this.objes.time
    //         // console.log(timeFang.time)
    //         let seek = this.objes.time
    //         this.getTime(seek+1)
    //   }, 1000);

    // },
    // getTime(durations){
    //     this.objes.time = durations
    //     this.audioSeek = durations
    // },
    inputClick() {
      if (!sessionStorage.getItem("token")) {
        this.$router.history.push({
          path: "/login",
          query: {
            path: this.$route.path,
            beforePath: this.$route.query.path,
          },
        });
      } else {
        this.flag = true;
      }
    },
    addGood() {
      this.$refs.num.innerHTML++;
    },
    greyClick() {
      this.flag = false;
    },
    showPopup(item) {
      this.show = true;
      this.bookItem = item;
    },
    del() {
      if (!sessionStorage.getItem("token")) {
        this.$router.history.push({
          path: "/login",
          query: {
            path: this.$route.path,
            beforePath: this.$route.query.path,
          },
        });
      } else {
        console.log(this.bookItem);
        if (sessionStorage.getItem("userId") === this.bookItem.userid) {
          this.show = false;
          console.log(this.bookItem.name);
          this.$store.dispatch("bags/delEvaluation", {
            bookid: this.$store.state.bags.bookItem.bookid,
            evaluationid: this.bookItem.evaluationid,
          });
        } else {
          console.log("不是本人不可删除");
          this.show = false;
          Toast({
            message: "不是本人的评论，不可删除",
            position: "bottom",
          });
        }
      }
    },
    like(itemData, indexData) {
      if (!sessionStorage.getItem("token")) {
        this.$router.history.push({
          path: "/login",
          query: {
            path: this.$route.path,
            beforePath: this.$route.query.path,
          },
        });
      } else {
        // console.log(this.$store.state.bags.goodData);
        if (this.$store.state.bags.goodData.length !== 0) {
          let findIndex = this.$store.state.bags.goodData.findIndex(
            (item, index) => {
              // console.log(itemData.evaluationid);
              // console.log(item.evaluationid);
              return (
                itemData.evaluationid === item.evaluationid &&
                item.userid === sessionStorage.getItem("userId")
              );
            }
          );
          console.log(findIndex);
          if (findIndex === -1) {
            console.log("add", "添加点赞");
            this.$store
              .dispatch("bags/setGood", {
                type: "add",
                userid: sessionStorage.getItem("userId"),
                evaluationid: itemData.evaluationid,
              })
              .then((res) => {
                this.forListClick(itemData, indexData);
              });
          } else {
            // console.log('del');
            this.$store
              .dispatch("bags/setGood", {
                type: "del",
                userid: sessionStorage.getItem("userId"),
                evaluationid: itemData.evaluationid,
              })
              .then((res) => {
                console.log("del", "删除点赞");
                this.forListClick(itemData, indexData);
              });
          }
        } else {
          this.$store
            .dispatch("bags/setGood", {
              type: "add",
              userid: sessionStorage.getItem("userId"),
              evaluationid: itemData.evaluationid,
            })
            .then((res) => {
              this.forListClick(itemData, indexData);
            });
        }
      }
    },
    forList() {
      this.$store
        .dispatch("bags/getEvaluation", {
          type: "book",
          bookid: this.$store.state.bags.bookItem.bookid,
        })
        .then((res) => {
          this.$store.state.bags.commentData.forEach((item1, index1) => {
            this.$refs.likeList[index1].style.color = "black";
          });
          this.$store.state.bags.commentData.forEach((item1, index1) => {
            this.$store.state.bags.goodData.forEach((item, index) => {
              if (
                item1.evaluationid === item.evaluationid &&
                item.userid === sessionStorage.getItem("userId")
              ) {
                this.$refs.likeList[index1].style.color = "red";
                // console.log(this.$refs.likeList[index1], "red");
              }
            });
          });
        });
    },
    forListClick(itemData, indexData) {
      this.$store
        .dispatch("bags/getEvaluation", {
          type: "book",
          bookid: this.$store.state.bags.bookItem.bookid,
        })
        .then((res) => {
          let arr = this.$store.state.bags.goodData.filter((item, index) => {
            return sessionStorage.getItem("userId") === item.userid;
          });
          this.$store.state.bags.commentData.forEach((item1, index1) => {
            this.$refs.likeList[index1].style.color = "black";
          });
          this.$store.state.bags.commentData.forEach((item1, index1) => {
            let fIndex = arr.findIndex((item, index) => {
              return item.evaluationid === item1.evaluationid;
            });
            if (fIndex !== -1) {
              console.log(fIndex);
              this.$refs.likeList[index1].style.color = "red";
            }
          });
        });
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.kong {
  width: 50%;
  height: 250px;
  line-height: 50px;
  margin-left: 25%;
  margin-top: 130px;
}
.kong p:nth-child(1) {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 35px;
  transform: rotate(-30deg);
  padding-left: 60px;
}
.kong p:nth-child(2) {
  font-size: 16px;
  font-family: PingFangSC-regular;
}
::-webkit-scrollbar {
  display: none;
}
.greyBox {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
.top_name_time > p:nth-child(1) {
  font-size: 16px;
}
.top_name_time > p:nth-child(2) {
  font-size: 12px;
  color: rgb(218, 216, 216);
  margin-top: 3px;
}
.aplive-right > p:nth-child(2) {
  margin-left: 3px;
  font-size: 15px;
}
.ping_box {
  width: 100%;
  height: calc(100vh - 60px);
  padding-top: 20px;
  background: white;
  /* position: fixed;
  top: 60px;
  left: 0; */
  z-index: 9999;
}
.pl_main-alive {
  padding: 0px 0 20px;
}
.ping_main {
  width: 100%;
  height: calc(100vh - 140px);
  overflow-y: auto;
  padding-bottom: 70px;
  margin-top: 20px;
}
.pingBox_main {
  width: 100%;
}

.ping-top {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
}
.ping-top h2 {
  padding: 0 10px;
}
.ping-top p {
  color: #8888;
  /* background-color: rgb(248, 237, 220); */
  font-size: 12px;
}
.ping_main {
  width: 95%;
  margin-left: 2.5%;
}
.aplive-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.aplive_left {
  width: 3.266667rem;
  display: flex;
  justify-content: space-around;
}
.aplive_left img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #8888;
}
.aplive-right {
  width: 40px;
  display: flex;
  align-items: center;
}
.aplive-right p:nth-child(1) {
  font-size: 16px;
}
.aplive-main {
  width: 95%;
  height: auto;
  margin-left: 2.5%;
  padding-top: 10px;
}
.inputBottom {
  position: fixed;
  bottom: 0;
  line-height: 25px;
  background-color: white;
  width: 100vw;
  padding: 15px 0 15px 20px;
  border-top: 1px solid rgb(197, 195, 195);
}
.inputBottom > input {
  width: 70vw;
  margin-left: 50px;
}
.inputBottom img {
  width: 40px;
}
.inputBottom > div:nth-child(1) {
  width: 40px;
  border-radius: 50%;
  height: 40px;
  overflow: hidden;
  position: fixed;
  bottom: 9px;
}
.inputBottom > div:nth-child(2) {
  position: fixed;
  bottom: 9px;
}
.bottom-enter {
  transform: translateY(100px);
}
.bottom-leave-active {
  transform: translateY(180px);
}
.alertBox {
  transition: all 0.3s;
  /* position: fixed;
  top: 0;
  width: 100vw;
  left: 0; */
}
.aplive-rightBox {
  display: flex;
  width: 16vw;
  justify-content: space-between;
}
.delBox {
  font-size: 20px;
  line-height: 10vh;
  text-align: center;
  /* border-bottom: 2px solid #eee; */
}
.color {
  color: red;
}
.delBtn {
  margin-top: 8px;
}
</style>
<style>
.van-overlay {
  background-color: rgba(0, 0, 0, 0.1);
}
.inputPingLun {
  padding-left: 5px;
  /* padding:3px 0; */
}
</style>
